<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent>child选择器的示例</title>
<style type="text/css">
input{
	margin:5px;						/*设置input元素的外边距为5像素*/
}
.input {
	font-size: 12pt;					/*设置文字大小*/
	color: #333333;						/*设置文字颜色*/
	background-color:#cef;	/*设置背景颜色*/
	border: 1px solid #000000;	/*设置边框*/
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#change").click(function(){	//绑定"换肤"按钮的单击事件
  		$("form > input").addClass("input");	//为表单元素的直接子元素input添加样式		
	});
	$("#default").click(function(){	//绑定“恢复默认”按钮的单击事件
  		$("form > input").removeClass("input");	//移除为表单元素的直接子元素input添加的样式		
	});
});
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  姓&nbsp;&nbsp;名：<input type="text" name="name" id="name" />
  <br />
  籍&nbsp;&nbsp;贯：<input name="native" type="text" id="native" />
  <br />
  生&nbsp;&nbsp;日：<input type="text" name="birthday" id="birthday" />
  <br />
  E-mail：<input type="text" name="email" id="email" />
  <br />
  <span>
  <input type="button" name="change" id="change" value="换肤"/>
  </span>
  <input type="button" name="default" id="default" value="恢复默认"/>
  <br /> 
</form>
</body>
</html>
